* {
  /* 初始化 */
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(to top, #a3bded, #6991c7);
}
.img1 {
  width: 900px;
  height: 500px;
  background: url("../../images/op/9.webp") no-repeat;
  /* 保持原有尺寸比例,裁切长边 */
  background-size: cover;
  /* 背景定位正中间 */
  background-position: center center;
  /* 弹性布局 */
  display: flex;
}
.img2 {
  background: url("../../images/op/10.webp") no-repeat;
  background-size: cover;
  /* 通过var函数调用自定义属性--i,计算每个元素的背景图水平定位 */
  background-position-x: calc(var(--i) * 10%);
  flex: 1;
  /* 默认沿Y轴旋转90度(看不见) */
  transform: rotateY(90deg);
  /* 设置过渡 */
  transition: 0.8s;
}
.img1:hover .img2 {
  /* 鼠标移入,图2沿Y轴旋转0度(出现) */
  transform: rotateY(0deg);
}
